<template>
  <div class="elec-safety-right">
    <div class="elec-statistics">
      <!-- <div class="time-picker-box">
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          popper-class="elec-time-picker"
          format="yy.MM.dd"
          value-format="yyyy-MM-dd hh:mm:ss"
          @change="initFamilyUseElec"
        >
        </el-date-picker>
      </div> -->
      <moduleRight title="户用电分析">
        <!-- <div class="screen">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            popper-class="elec-time-picker"
            format="yy.MM.dd"
            value-format="yyyy-MM-dd hh:mm:ss"
            @change="initFamilyUseElec"
          >
          </el-date-picker>
          <el-select
            v-model="houseType"
            placeholder="请选择"
            popper-class="time-picker"
            style="margin-left: 10%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <div class="content" id="family-useElec-chart">
          <!-- <div class="bg">
            <span>用电量</span>
          </div>
          <div class="text">
            <span>{{ elecNum }}</span
            >Kwh
          </div> -->
        </div>
      </moduleRight>
    </div>
    <div class="elec-analysis">
      <moduleRight title="日用电量分析">
        <div class="content" id="analysis-chart"></div>
      </moduleRight>
    </div>
    <div class="alarm-type">
      <moduleRight title="报警类型统计">
        <div class="content" id="alarmType-chart"></div>
      </moduleRight>
    </div>
  </div>
</template>

<script>
import { mixins } from "./js/mixins";
const dayjs = require("dayjs");
import { powerUseData } from "@/api/index";
import axios from "axios";
export default {
  name: "elecSafetyRight",
  mixins: [mixins],
  data() {
    return {
      timeRange: [
        dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
        dayjs(new Date()).format(`YYYY-MM-DD HH:mm:ss`),
      ],
      elecNum: 0,
      options: [
        {
          value: 1,
          label: "1-6户",
        },
        {
          value: 2,
          label: "7-12户",
        },
        {
          value: 3,
          label: "13-18户",
        },
      ],
      houseType: 1,
    };
  },
  mounted() {
    this.initFamilyUseElec();
    this.initElecAnalysis();
    this.initAlarmType();
    // this.initElecNum();
  },
  methods: {
    generateRandomColor() {
      // 生成随机的十六进制数
      var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
      return color;
    },
    // 户用电量分析
    initFamilyUseElec() {
      let xdata = [];
      let ydata = [];
      let that = this;
      axios
        .get("/hanfeng-large-screen/json/user_electricity.json")
        .then((res) => {
          if (res.errcode == 0) {
            let list = res.data ?? [];
            list.forEach((item) => {
              xdata.push(item.time);
              item.data.forEach((it) => {
                if (ydata.length) {
                  let index = -1;
                  for (let i in ydata) {
                    if (ydata[i].name == it.house) {
                      index = i;
                    }
                  }
                  if (index != -1) {
                    ydata[index].data.push(it.usePowerNum);
                  } else {
                    ydata.push({
                      name: it.house,
                      data: [it.usePowerNum],
                      color: that.generateRandomColor(),
                    });
                  }
                } else {
                  ydata.push({
                    name: it.house,
                    data: [it.usePowerNum],
                    color: that.generateRandomColor(),
                  });
                }
              });
            });
            that.setFamilyUseElec({ xdata, ydata }, "family-useElec-chart");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initElecAnalysis() {
      let xdata = [];
      let ydata = [];
      powerUseData({}).then((res) => {
        let list = res ?? [];
        if (list.length) {
          list.forEach((item) => {
            xdata.push(item.day);
            ydata.push(item.total);
          });
        }
        this.setElecAnalysis({ xdata, ydata }, "analysis-chart");
      });
    },
    // initElecNum() {
    //   let param = {
    //     startTime: this.timeRange[0],
    //     endTime: this.timeRange[1],
    //   };
    //   getUsageInRange(param).then((res) => {
    //     this.elecNum = res;
    //   });
    // },
    // 报警类型统计
    initAlarmType() {
      let xdata = ["温度预警", "电压预警", "电流预警", "漏电预警", "离线"];
      let ydata = [220, 151, 108, 134, 100];
      this.setAlarmType({ xdata, ydata }, "alarmType-chart");
    },
  },
};
</script>

<style lang="scss">
.elec-time-picker {
  background: #090746;
  -webkit-box-shadow: 0 0 1.8518518519vh 0.0740740741vh #0080ff inset;
  box-shadow: inset 0 0 1.8518518519vh 0.0740740741vh #0080ff;
  border: 2px solid rgba(0, 128, 255, 0.2);
  color: #fff;
  .el-date-table th {
    color: #fff;
  }
  .el-date-table td.prev-month {
    color: #666;
  }
  .el-date-table td.today span {
    color: #0ff;
  }
  .el-date-table td.end-date span,
  .el-date-table td.start-date span {
    background-color: #0461bd;
  }
  .el-date-table td.in-range div {
    background-color: rgb(6, 36, 106);
  }
  .el-date-table td:hover {
    color: #0ff;
  }
  .el-date-table td span:hover {
    color: #0ff;
  }
}
</style>

<style scoped lang="scss">
.elec-safety-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .elec-statistics {
    width: 100%;
    height: 30%;
    position: relative;
    // .time-picker-box {
    //   width: 54%;
    //   position: absolute;
    // }
    .screen {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .content {
      height: calc(100% - 0px);
      // height: calc(100% - 2vh);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .bg {
        width: 40%;
        height: 75%;
        background: url("@/assets/image/icon3.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
        position: relative;
        margin-right: 0.2vw;
        > span {
          position: absolute;
          right: 10%;
          top: 40%;
        }
      }
      .text {
        display: flex;
        align-items: center;
        color: #fff;
        > span {
          color: #1edcf9;
          font-family: "YouSheBiaoTiHei";
          font-size: 0.28rem;
          font-style: normal;
          font-weight: 500;
          padding: 0 0.2vw;
        }
      }
    }
  }
  .elec-analysis {
    width: 100%;
    height: 34%;
    .content {
      height: calc(100% - 0px);
    }
  }
  .alarm-type {
    width: 100%;
    height: 34%;
    .content {
      height: calc(100% - 0px);
    }
  }
}
</style>
